{{ $text := .Params.components }}
{{ $types := slice "Sources" "Transforms" "Sinks" }}
<div class="relative py-12 md:py-16 lg:py-20 mx-auto max-w-6xl px-8 md:px-4 lg:px-0">
  <div class="text-center">
    {{ partial "home/heading.html" (dict "title" $text.title) }}

    <p class="mt-4 text-xl md:text-2xl font-light text-gray-700 dark:text-gray-200">
      {{ $text.description }}
    </p>
  </div>

  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
    {{ range $types }}
    {{ $moreHref := printf "/docs/reference/configuration/%s" (. | lower) }}
    {{ $type := . }}
    {{ $components := where site.RegularPages ".CurrentSection.Params.short" . }}
    {{ $num := len $components }}
    <div class="flex flex-col space-y-3">
      <span class="text-xl text-gray-600 dark:text-gray-100 text-primaryfont-light tracking-wide">
        <span class="font-extrabold">
          {{ $num }}
        </span>
        {{ $type | lower }}
      </span>

      <div class="mt-4 flex flex-col space-y-1.5">
        {{ range first 10 $components }}
        {{ $title := .Params.short | default .Title }}
        {{ template "component-chip" (dict "title" $title "href" .RelPermalink) }}
        {{ end }}
      </div>

      <a href="{{ $moreHref }}" class="text-dark dark:text-gray-300 hover:text-secondary dark:hover:text-primary">
        {{/* Heroicons: outline/dots-horizontal */}}
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
        </svg>
      </a>
    </div>
    {{ end }}
  </div>
</div>

{{ define "component-chip" }}
<a href="{{ .href }}" class="border dark:border-gray-700 rounded py-2 px-3 text-sm font-light text-gray-600 dark:text-gray-300 hover:text-secondary hover:border-secondary dark:hover:text-primary leading-tight dark:hover:border-primary">
  {{ .title }}
</a>
{{ end }}